<template>
  <div class="forum-detail-container">
    <div class="forum-detail-wrapper">
      <!-- 左侧内容区域 -->
      <div class="left-content">
        <!-- 返回按钮 -->
        <div class="back-button" @click="goBack">
          <el-icon><ArrowLeft /></el-icon>
          <span>返回</span>
        </div>

        <!-- 文章内容 -->
        <div class="post-content-card" v-loading="loading">
          <div class="post-header">
            <h1 class="post-title" v-html="post.title"></h1>
            <div class="post-meta">
              <div class="post-author">
                <div class="avatar-l">
                  <img :src="post.avatar || avatar" alt="作者头像" class="author-avatar" />
                  <div class="avatar-l-info">
                    <span class="author-name">{{ post.username }}</span>
                    <div class="post-time">{{ formatDate(post.create_time) }}</div>
                  </div>
                </div>
                <div class="post-info-num">
                  <div class="post-info-num-item" @click="likePost(post.id, post.is_like)">
                    <img :src="post.is_like ? like : unLike" alt="点赞" />
                    <span>{{ post.like || 0 }}</span>
                  </div>
                  <div class="post-info-num-item">
                    <img src="~@/static/comment.png" alt="评论" />
                    <span>{{ commentList.length || 0 }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="post-tags" v-if="post.tags && post.tags.length > 0">
              <span
                class="tag"
                v-for="(tag, index) in post.tags"
                :key="index"
                >{{ tag }}</span
              >
            </div>
          </div>

          <div class="post-content" v-html="post.content"></div>

          <!-- 附件列表 -->
          <div
            class="post-files"
            v-if="post.material && post.material?.length > 0"
          >
            <h3 class="files-title">附件资料</h3>
            <div class="file-list">
              <div
                class="file-item"
                v-for="(file, index) in post.material"
                :key="index"
              >
                <div class="file-info">
                  <div class="file-name">{{ file.name }}</div>
                  <div class="file-size">
                    大小: {{ (file.size / 1024 / 1024).toFixed(2) }}MB
                  </div>
                </div>
                <div class="file-actions">
                  <el-button
                    type="primary"
                    size="small"
                    @click="downloadFile(file.url)"
                  >
                    <el-icon><Download /></el-icon>
                    下载
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 文章底部操作栏 -->
          <!-- <div class="post-actions">
            <div class="action-item" @click="toggleLike">
              <el-icon :class="{ 'liked': isLiked }"><Star /></el-icon>
              <span>点赞 {{ post.likes }}</span>
            </div>
            <div class="action-item" @click="scrollToComments">
              <el-icon><ChatDotRound /></el-icon>
              <span>评论 {{ commentList.length }}</span>
            </div>
            <div class="action-item" @click="sharePost">
              <el-icon><Share /></el-icon>
              <span>分享</span>
            </div>
            <div class="action-item" @click="collectPost">
              <el-icon :class="{ 'collected': isCollected }"><Collection /></el-icon>
              <span>收藏</span>
            </div>
          </div> -->
        </div>

        <!-- 评论区 -->
        <div class="comments-section" ref="commentsSection">
          <h2 class="section-title">评论 ({{ commentList.length }})</h2>

          <!-- 评论输入框 -->
          <div class="comment-input-container">
            <el-input
              v-model="commentContent"
              type="textarea"
              :rows="3"
              placeholder="写下你的评论..."
              :disabled="!isLoggedIn"
            />
            <div class="comment-actions">
              <el-button
                type="primary"
                @click="submitComment"
                :disabled="!isLoggedIn || !commentContent.trim() || isSubmittingComment"
                :loading="isSubmittingComment"
              >
                发表评论
              </el-button>
              <div class="login-tip" v-if="!isLoggedIn">
                请先
                <span class="login-link" @click="goToLogin">登录</span> 后评论
              </div>
            </div>
          </div>

          <!-- 评论列表 -->
          <div class="comment-list" v-if="commentList.length > 0">
            <div
              class="comment-item"
              v-for="(comment, index) in commentList"
              :key="index"
            >
              <div class="comment-author">
                <img
                  :src="comment.avatar"
                  alt="评论者头像"
                  class="comment-avatar"
                />
                <div class="comment-author-info">
                  <div class="comment-author-name">{{ comment.username }}</div>
                </div>
              </div>
              <div class="comment-content" v-html="comment.content"></div>
              <div class="comment-actions">
                <div class="comment-time">
                  {{ formatDate(comment.create_time) }}
                </div>
                <div class="action-time-l">
                  <div class="action-item" @click="replyComment(index)">
                    <img src="~@/static/comment.png" alt="回复" />
                    <span>回复</span>
                  </div>
                  <div class="action-item" @click="likeComment(index)">
                    <img :src="comment.like > 0 ? like : unLike" alt="点赞" />
                    <span>{{ comment.like || 0 }}</span>
                  </div>
                </div>
              </div>

              <!-- 添加回一级评论的回复输入框 -->
              <div class="reply-input-container" v-if="activeReplyIndex === index && activeReplyToIndex === -1">
                <el-input
                  v-model="replyContent"
                  type="textarea"
                  :rows="2"
                  :placeholder="replyPlaceholder"
                  :disabled="!isLoggedIn || isSubmittingReply"
                />
                <div class="reply-actions">
                  <el-button size="small" @click="cancelReply" :disabled="isSubmittingReply">取消</el-button>
                  <el-button 
                    type="primary" 
                    size="small" 
                    @click="submitReply" 
                    :disabled="!isLoggedIn || !replyContent.trim() || isSubmittingReply"
                    :loading="isSubmittingReply"
                  >
                    回复
                  </el-button>
                </div>
              </div>

              <!-- 回复列表 - 递归渲染子评论 -->
              <template v-if="comment.children && comment.children.length > 0">
                <div class="reply-list">
                  <div v-for="reply in getVisibleReplies(comment)" :key="reply.id" class="reply-item">
                    <div class="reply-author">
                      <img :src="reply.avatar" alt="回复者头像" class="reply-avatar" />
                      <div class="reply-author-info">
                        <div class="reply-author-name">
                          {{ reply.username }}
                          <!-- 只有对非顶级评论的回复才显示回复箭头和被回复者 -->
                          <template v-if="reply.replyToUsername">
                            <span class="right-arrow"></span>
                            {{ reply.replyToUsername }}
                          </template>
                        </div>
                      </div>
                    </div>
                    <div class="reply-content" v-html="reply.content"></div>
                    <div class="reply-actions">
                      <div class="reply-time">{{ formatDate(reply.create_time) }}</div>
                      <div class="reply-action-r">
                        <div class="action-item" @click="replyToComment(index, reply.id, reply.username)">
                          <img src="~@/static/comment.png" alt="回复" />
                          <span>回复</span>
                        </div>
                        <div class="action-item" @click="likeReply(reply)">
                          <img src="~@/static/like.png" alt="点赞" />
                          <span>{{ reply.like || 0 }}</span>
                        </div>
                      </div>
                    </div>
                    
                    <!-- 回复输入框 -->
                    <div class="reply-input-container" v-if="activeReplyIndex === index && activeReplyToIndex === reply.id">
                      <el-input
                        v-model="replyContent"
                        type="textarea"
                        :rows="2"
                        :placeholder="replyPlaceholder"
                        :disabled="!isLoggedIn || isSubmittingReply"
                      />
                      <div class="reply-actions">
                        <el-button size="small" @click="cancelReply" :disabled="isSubmittingReply">取消</el-button>
                        <el-button 
                          type="primary" 
                          size="small" 
                          @click="submitReply" 
                          :disabled="!isLoggedIn || !replyContent.trim() || isSubmittingReply"
                          :loading="isSubmittingReply"
                        >
                          回复
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <div class="expand-reply-btn" v-if="shouldShowExpandButton(comment)">
                    <el-button class="expand-reply-btn-item" type="text" @click="expandReplies(comment.id)">
                      展开{{ getHiddenRepliesCount(comment) }}条回复
                      <el-icon><ArrowDown /></el-icon>
                    </el-button>
                  </div>
                </div>
              </template>
            </div>
          </div>

          <!-- 无评论提示 -->
          <div class="no-comments" v-else>暂无评论，快来发表第一条评论吧！</div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="right-content">
        <!-- 作者信息卡片 -->
        <div class="author-card">
          <div class="author-header">
            <img :src="post.avatar" alt="作者头像" class="author-avatar-large" />
            <div class="author-name-large">{{ post.username }}</div>
            <div class="author-bio">{{ post.bio || '这个人很懒，什么都没留下' }}</div>
          </div>
          <div class="author-stats">
            <div class="stat-item">
              <div class="stat-value">{{ post.posts || 0 }}</div>
              <div class="stat-label">获赞</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ post.following || 0 }}</div>
              <div class="stat-label">发帖</div>
            </div>
          </div>
          <div class="author-actions">
            <el-button class="author-action-btn"  @click="goToForum">发帖</el-button>
          </div>
        </div>

        <!-- 相关推荐 -->
        <div class="related-posts">
          <h3 class="section-title">热门资讯帖</h3>
          <div class="news-category-tabs">
            <div 
              v-for="(tab, index) in newsTabs" 
              :key="index" 
              class="news-tab" 
              :class="{ active: activeTab === tab.value }"
              @click="handleTabChange(tab.value)"
            >
              {{ tab.label }}
            </div>
          </div>
          <div class="hot-post-list" v-loading="hotPostLoading">
            <div class="hot-post-item" v-for="(post, index) in relatedPosts" :key="index" @click="goToForumDetail(post.id)">
              <div class="hot-post-title" v-html="post.title"></div>
              <div class="hot-post-meta">
                <div class="meta-item">
                  <img :src="post.is_like ? like : unLike" alt="点赞" />
                  <span>{{ post.like || 0 }}</span>
                </div>
                <div class="meta-item">
                  <img src="~@/static/comment.png" alt="评论" />
                  <span>{{ post.comment || 0 }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import {
  ArrowLeft,
  Star,
  ChatDotRound,
  Share,
  Collection,
  Download,
  // ThumbUp,
  ChatLineRound,
  ArrowDown,
} from "@element-plus/icons-vue";
//   import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import dayjs from "dayjs";
import { ElMessage, ElLoading } from "element-plus";
import {
  handleForumDetail,
  handleForumLike,
  handleForumComment,
  handleForumCommentList,
  handleForumList,
} from "../../service/forum";
import like from '@/static/like.png';
import unLike from '@/static/un_like.png';
import avatar from '@/static/image.png';

const router = useRouter();
const route = useRoute();

// 评论区域引用
const commentsSection = ref(null);

// 用户状态
const isLoggedIn = ref(true); // 模拟用户已登录状态
const isLiked = ref(false);
const isCollected = ref(false);
const isFollowing = ref(false);

// 评论相关
const commentContent = ref("");
const replyContent = ref("");
const activeReplyIndex = ref(-1);
const activeReplyToIndex = ref(-1);
const replyPlaceholder = ref("写下你的回复...");
// 记录已展开评论的ID集合
const expandedCommentIds = ref(new Set());

// 帖子数据
const post = ref({});

// 相关推荐
const relatedPosts = ref([]);

const commentList = ref([]);

// 加载状态
const loading = ref(false);

// 回复输入框的ref
const replyInputRef = ref(null);

// 添加加载状态
const isSubmittingComment = ref(false);
const isSubmittingReply = ref(false);

// 相关推荐加载状态
const hotPostLoading = ref(false);

// 帖子类型
const newsTabs = ref([
    { label: '全部', value: 'all' },
    { label: 'GMAT', value: 'gmat' },
    { label: 'GRE', value: 'gre' },
    { label: 'EA', value: 'ea' }
  ]);
const activeTab = ref('all');
// 返回上一页
const goBack = () => {
  router.back();
};

const formatDate = (date) => {
  return dayjs(date * 1000).format("YYYY-MM-DD");
};

const goToForum = () => {
  router.push('/forum/create');
}

const goToForumDetail = (id) => {
  router.push(`/forumDetail/${id}`);
}

// 获取帖子详情
const getForumDetail = async () => {
  const postId = router.currentRoute.value.params.id;
  if (!postId) {
    ElMessage.error("帖子ID不存在");
    router.push("/forum");
    return;
  }

  loading.value = true;

  try {
    const res = await handleForumDetail({ id: postId });
    if (res.code === "000000") {
      loading.value = false;
      const data = res.data;
      post.value = data;

      // 获取评论列表
      getCommentList(postId);

    } else {
      ElMessage.error(res.msg || "获取帖子详情失败");
    }
  } catch (error) {
    console.error("获取帖子详情出错：", error);
    ElMessage.error("获取帖子详情出错，请重试");
  } finally {
    loading.value = false;
  }
};

// 获取评论列表
const getCommentList = async (postId) => {
  try {
    const res = await handleForumCommentList({ logid: Number(postId), type: 1 });
    if (res.code === "000000") {
      commentList.value = res.data || [];
    } else {
      console.error("获取评论列表失败：", res.msg);
    }
  } catch (error) {
    console.error("获取评论列表出错：", error);
  }
};

// 获取相关推荐
const getRelatedPosts = async (type) => {
  if (!type) {
    return;
  }
  hotPostLoading.value = true;
  const finalType = type === 'all' ? 0 : type === 'gmat' ? 1 : type === 'gre' ? 2 : 3;
  try {
    const params = {
      page: 1,
      rows: 10,
      sort: 0,
      title: '',
      type: finalType,
    }
    const res = await handleForumList(params);
    if (res.code === '000000') {
      hotPostLoading.value = false;
      // 过滤掉当前帖子
      relatedPosts.value = (res.data.result || [])
        .filter((item) => item.id !== post.value.id)
        .slice(0, 6)
    }
  } catch (error) {
    console.error("获取相关推荐出错：", error);
  } finally {
    hotPostLoading.value = false;
  }
};

// 处理标签切换
const handleTabChange = (tabValue) => {
  activeTab.value = tabValue;
  getRelatedPosts(tabValue);
};

// 下载文件
const downloadFile = (url) => {
  if (!url) {
      ElMessage.error('文件不存在！');
      return;
    }
    
    // 创建一个隐藏的a标签用于下载
    const downloadLink = document.createElement('a');
    downloadLink.href = url;
    
    // 从URL中提取文件名，如果无法获取则使用默认名称
    const fileName = url.split('/').pop() || '下载文件';
    downloadLink.setAttribute('download', fileName);
    
    // 添加到body，触发点击，然后移除
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
    
    ElMessage.success('开始下载文件');
};

// 提交评论
const submitComment = async () => {
  if (!isLoggedIn.value) {
    ElMessage.warning("请先登录后再操作");
    return;
  }

  if (!commentContent.value.trim()) {
    ElMessage.warning("评论内容不能为空");
    return;
  }

  // 防止二次提交
  if (isSubmittingComment.value) {
    return;
  }
  isSubmittingComment.value = true;

  try {
    const res = await handleForumComment({
      logid: post.value.id,
      content: commentContent.value,
      pid: 0, // 顶级评论
      subject: post.value.type,
      type: 1,
    });

    if (res.code === "000000") {
      ElMessage.success("评论发表成功");
      // 评论成功后刷新评论列表
      getCommentList(post.value.id);
      // 清空评论框
      commentContent.value = '';
    } else {
      ElMessage.error(res.msg || "评论发表失败");
    }
  } catch (error) {
    console.error("评论发表出错：", error);
    ElMessage.error("评论发表失败，请重试");
  } finally {
    // 无论成功失败，都重置提交状态
    isSubmittingComment.value = false;
  }
};

// 更新点赞回复的函数
const likeReply = async (reply) => {
  if (!isLoggedIn.value) {
    ElMessage.warning("请先登录后再操作");
    return;
  }

  try {
    const res = await handleForumLike({
      logid: reply.id,
      type: 2, // 评论点赞
    });

    if (res.code === '000000') {
      // 基于当前is_like的值进行判断
      // 通常，1表示未点赞，2表示已点赞
      if (reply.is_like === 1 || reply.is_like === 0) { // 兼容可能的0值
        ElMessage.success('点赞成功');
      } else {
        ElMessage.info('已取消点赞');
      }
      // 刷新评论列表以获取最新的点赞状态
      getCommentList(post.value.id);
    } else {
      ElMessage.error(res.msg || "操作失败");
    }
  } catch (error) {
    console.error("点赞回复出错：", error);
    ElMessage.error("操作失败，请重试");
  }
};

// 点赞帖子
const likePost = (id, is_like) => {
  if (!isLoggedIn.value) {
    ElMessage.warning('请先登录后再操作');
    return;
  }
  
  // 调用点赞API
  handleForumLike({ logid:id, type: 1 }).then(res => {
    if (res.code === '000000') {
      // 找到对应帖子并更新点赞数
      if (post.value) {
        // 根据当前状态更新点赞数和状态
        if (is_like === 0) {
          // 未点赞，现在点赞
          post.value.like += 1;
          post.value.is_like = 1;
          // ElMessage.success('点赞成功');
        } else {
          // 已点赞，取消点赞
          post.value.like -= 1;
          post.value.is_like = 0;
          ElMessage.info('已取消点赞');
        }
      }
    } else {
      ElMessage.error(res.message || '操作失败');
    }
  }).catch(() => {
    ElMessage.error('操作失败');
  });
}

// 更新点赞评论的函数
const likeComment = async (index) => {
  if (!isLoggedIn.value) {
    ElMessage.warning("请先登录后再操作");
    return;
  }

  const comment = commentList.value[index];

  try {
    const res = await handleForumLike({
      logid: comment.id,
      type: 2, // 评论点赞
    });

    if (res.code === '000000') {
      // 基于当前is_like的值进行判断
      // 通常，1表示未点赞，2表示已点赞
      if (comment.is_like === 1 || comment.is_like === 0) { // 兼容可能的0值
        ElMessage.success('点赞成功');
      } else {
        ElMessage.info('已取消点赞');
      }
      // 刷新评论列表以获取最新的点赞状态
      getCommentList(post.value.id);
    } else {
      ElMessage.error(res.msg || "操作失败");
    }
  } catch (error) {
    console.error("点赞评论出错：", error);
    ElMessage.error("操作失败，请重试");
  }
};

// 修改回复相关函数
const replyComment = (index) => {
  if (!isLoggedIn.value) {
    ElMessage.warning("请先登录后再操作");
    return;
  }

  activeReplyIndex.value = index;
  activeReplyToIndex.value = -1;
  replyPlaceholder.value = `回复 ${commentList.value[index].username}:`;
  replyContent.value = "";
  
  // 等待DOM更新后聚焦
  nextTick(() => {
    const inputElement = document.querySelector('.reply-input-container .el-textarea__inner');
    if (inputElement) {
      inputElement.focus();
    }
  });
};

// 统一的回复某个评论的函数
const replyToComment = (commentIndex, replyId, replyUsername) => {
  if (!isLoggedIn.value) {
    ElMessage.warning("请先登录后再操作");
    return;
  }

  activeReplyIndex.value = commentIndex;
  activeReplyToIndex.value = replyId;
  replyPlaceholder.value = `回复 ${replyUsername}:`;
  replyContent.value = "";
  
  // 等待DOM更新后聚焦
  nextTick(() => {
    const inputElement = document.querySelector('.reply-input-container .el-textarea__inner');
    if (inputElement) {
      inputElement.focus();
    }
  });
};

const cancelReply = () => {
  activeReplyIndex.value = -1;
  activeReplyToIndex.value = -1;
  replyContent.value = "";
};

// 辅助函数：获取所有回复（包括嵌套回复）并处理回复关系
const getAllReplies = (comment) => {
  const result = [];
  
  const processReplies = (replies, level = 1, parentInfo = {}) => {
    if (!replies || !replies.length) return;
    
    for (const reply of replies) {
      // 为回复添加额外信息
      const processedReply = { 
        ...reply,
        level, // 记录评论层级
        replyToUsername: level === 1 ? null : parentInfo.username // 只有非一级回复才有被回复对象
      };
      
      result.push(processedReply);
      
      // 递归处理子回复
      if (reply.children && reply.children.length > 0) {
        processReplies(reply.children, level + 1, { id: reply.id, username: reply.username });
      }
    }
  };
  
  processReplies(comment.children);
  return result;
};

// 跳转到登录页
const goToLogin = () => {
  router.push("/login");
};

// 跳转到相关帖子
const goToPost = (postId) => {
  router.push(`/forumDetail?id=${postId}`);
};

// 修改后的代码，添加回提交回复的逻辑
const submitReply = async () => {
  if (!isLoggedIn.value) {
    ElMessage.warning("请先登录后再操作");
    return;
  }

  if (!replyContent.value.trim()) {
    ElMessage.warning("回复内容不能为空");
    return;
  }

  // 防止二次提交
  if (isSubmittingReply.value) {
    return;
  }
  isSubmittingReply.value = true;

  const commentIndex = activeReplyIndex.value;
  const replyToId = activeReplyToIndex.value;

  // 获取要回复的评论的ID
  let parentId;
  if (replyToId === -1) {
    // 回复一级评论
    parentId = commentList.value[commentIndex].id;
  } else {
    // 回复其他评论
    parentId = replyToId;
  }

  try {
    const res = await handleForumComment({
      logid: post.value.id,
      content: replyContent.value,
      pid: parentId,
      subject: post.value.type,
      type: 1,
    });

    if (res.code === "000000") {
      ElMessage.success("回复发表成功");
      // 回复成功后刷新评论列表
      getCommentList(post.value.id);
      // 清空回复框并关闭
      replyContent.value = "";
      activeReplyIndex.value = -1;
      activeReplyToIndex.value = -1;
    } else {
      ElMessage.error(res.msg || "回复发表失败");
    }
  } catch (error) {
    console.error("回复发表出错：", error);
    ElMessage.error("回复发表失败，请重试");
  } finally {
    // 无论成功失败，都重置提交状态
    isSubmittingReply.value = false;
  }
};

// 获取可见的回复列表
const getVisibleReplies = (comment) => {
  const allReplies = getAllReplies(comment);
  // 如果评论已展开或回复数量不超过2条，返回全部回复
  if (expandedCommentIds.value.has(comment.id) || allReplies.length <= 2) {
    return allReplies;
  }
  // 否则只返回前2条
  return allReplies.slice(0, 2);
};

// 展开评论回复
const expandReplies = (commentId) => {
  expandedCommentIds.value.add(commentId);
};

// 计算是否应该显示展开按钮
const shouldShowExpandButton = (comment) => {
  const allReplies = getAllReplies(comment);
  return allReplies.length > 2 && !expandedCommentIds.value.has(comment.id);
};

// 计算隐藏的回复数量
const getHiddenRepliesCount = (comment) => {
  const allReplies = getAllReplies(comment);
  return allReplies.length > 2 ? allReplies.length - 2 : 0;
};

onMounted(() => {
  // 不再在这里加载数据，改为只在watch中处理
  // getForumDetail();
  // getRelatedPosts(activeTab.value);
});

// 监听路由参数变化
watch(
  () => route.params.id,
  (newId, oldId) => {
    if (newId) {  // 移除oldId比较，只要有ID就加载
      // 重置页面状态
      post.value = {};
      commentList.value = [];
      commentContent.value = "";
      replyContent.value = "";
      activeReplyIndex.value = -1;
      activeReplyToIndex.value = -1;
      expandedCommentIds.value.clear();
      
      // 重新加载数据
      getForumDetail();
      getRelatedPosts(activeTab.value);
      
      // 滚动到页面顶部（添加安全检查）
      nextTick(() => {
        if (typeof window !== 'undefined') {
          window.scrollTo(0, 0);
        }
      });
    }
  },
  { immediate: true } // 立即执行一次
);
</script>
<style scoped lang="scss">
// 提取公共变量
$primary-color: #126983;
$secondary-color: #18404b;
$text-color: #333;
$light-text-color: #666;
$border-color: #eee;
$background-color: #ecf4f2;
$card-background: #f9f9f9;
$border-radius: 8px;
$box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

.forum-detail-container {
  display: flex;
  justify-content: center;
  padding: 20px;
  background-color: $background-color;
  min-height: 100vh;
}

.forum-detail-wrapper {
  width: 1200px;
  display: flex;
  gap: 20px;
}

.left-content {
  flex: 1;
  max-width: 850px;
}

.right-content {
  width: 330px;
}

.back-button {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-bottom: 20px;
  color: $text-color;

  span {
    margin-left: 5px;
  }

  &:hover {
    color: $primary-color;
  }
}

.hot-news-card {
    background-color: #fff;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    padding: 20px;
  }
  
  .card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
  }
  
  .header-icon {
    width: 16px;
    height: 16px;
    background-color: $primary-color;
    margin-right: 10px;
  }
  
  .card-title {
    font-size: 18px;
    font-weight: 500;
  }
  
  .news-category-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
  }
  
  .news-tab {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    
    &.active {
      background-color: $primary-color;
      color: #fff;
    }
  }
  
  .hot-post-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .hot-post-item {
    padding-bottom: 15px;
    border-bottom: 1px solid $border-color;
    
    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }
  
  .hot-post-title {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    
    &:hover {
      color: $primary-color;
    }
  }
  
  .hot-post-meta {
    display: flex;
    gap: 15px;
  }
  
  .meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: $light-text-color;
    &:nth-child(1) {
      margin-right: 10px;
    }
    img{
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

.post-content-card {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: 20px;
  margin-bottom: 20px;
}

.post-header {
  margin-bottom: 20px;
  border-bottom: 1px solid $border-color;
  padding-bottom: 15px;
}

.post-title {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 15px;
  color: $text-color;
  line-height: 1.4;
}

.post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.post-author {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .avatar-l {
    display: flex;
    align-items: center;
    .avatar-l-info {
      display: flex;
      flex-direction: column;
    }
  }
  .post-info-num {
    display: flex;
    align-items: center;
    .post-info-num-item {
      display: flex;
      align-items: center;
      &:nth-child(1) {
        margin-right: 10px;
      }
      img {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
      span {
        font-size: 14px;
        color: $light-text-color;
      }
    }
  }

  .author-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .author-name {
    font-size: 16px;
    font-weight: 500;
    color: $text-color;
  }
}

.post-time {
  font-size: 14px;
  color: $light-text-color;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .tag {
    background-color: rgba($primary-color, 0.1);
    color: $primary-color;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
  }
}

.post-content {
  font-size: 16px;
  line-height: 1.8;
  color: $text-color;
  margin-bottom: 20px;

  p {
    margin-bottom: 15px;
  }

  h3 {
    font-size: 18px;
    font-weight: 500;
    margin: 20px 0 15px;
  }
}

.post-files {
  margin-top: 30px;
  border-top: 1px solid $border-color;
  padding-top: 20px;
}

.files-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 15px;
  color: $text-color;
}

.file-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: $card-background;
  border-radius: $border-radius;
  border: 1px solid $border-color;
}

.file-info {
  display: flex;
  flex-direction: column;
}

.file-name {
  font-size: 14px;
  margin-bottom: 5px;
  color: $text-color;
}

.file-size {
  font-size: 12px;
  color: $light-text-color;
}

.post-actions {
  display: flex;
  justify-content: space-around;
  padding-top: 20px;
  border-top: 1px solid $border-color;
  margin-top: 20px;

  .action-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: $light-text-color;
    &:nth-child(1) {
      margin-right: 10px;
    }
    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }

    .el-icon {
      margin-right: 5px;
      font-size: 18px;
    }

    &:hover {
      color: $primary-color;
    }

    .liked {
      color: #f56c6c;
    }

    .collected {
      color: #e6a23c;
    }
  }
}

.comments-section {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: 20px;
}

.section-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
  color: $text-color;
}

.comment-input-container {
  margin-bottom: 30px;
}

.comment-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  .action-time-l {
    display: flex;
    align-items: center;
  }
}

.login-tip {
  font-size: 14px;
  color: $light-text-color;

  .login-link {
    color: $primary-color;
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}

.comment-list {
  margin-top: 20px;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid $border-color;

  &:last-child {
    border-bottom: none;
  }
}

.comment-author {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-avatar {
  width: 24px;
  height: 24px;
  border-radius:4px;
  margin-right: 10px;
}

.comment-author-info {
  // display: flex;
  // flex-direction: column;
}

.comment-author-name {
  font-size: 14px;
  font-weight: 600;
  color: $text-color;
}

.comment-time {
  font-size: 12px;
  color: $light-text-color;
  margin-top: 3px;
}

.comment-content {
  font-size: 14px;
  color: $text-color;
  padding-left: 34px;
}

.comment-actions {
  display: flex;
  padding-left: 34px;

  .action-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: $light-text-color;
    font-size: 14px;
    &:nth-child(1) {
      margin-right: 10px;
    }
    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }

    .el-icon {
      margin-right: 5px;
      font-size: 16px;
    }

    &:hover {
      color: $primary-color;
    }

    .liked {
      color: #f56c6c;
    }
  }
}

.reply-list {
  margin-top: 15px;
  margin-left: 34px;
  background-color: $card-background;
  padding-bottom: 10px;
  .expand-reply-btn {
    text-align: left;
    margin-left: 49px;
    .expand-reply-btn-item {
      color: #1E8FDA;
      font-size: 14px;
    }
  }
}

.reply-item {
  // background-color: $card-background;
  border-radius: $border-radius;
  padding: 15px 15px 0px;
  // margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}

.reply-author {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
}

.reply-avatar {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  margin-right: 10px;
}

.reply-author-info {
  display: flex;
  flex-direction: column;
  .right-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 6px solid #666;  /* 箭头颜色 */
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: middle;
  }
}

.reply-author-name {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: $text-color;
}

.reply-time {
  font-size: 12px;
  color: $light-text-color;
  margin-top: 3px;
}

.reply-content {
  font-size: 14px;
  color: $text-color;
  margin: 10px 0;
  padding-left: 34px;

  .reply-to {
    color: $primary-color;
    margin-right: 5px;
  }
}

.reply-actions {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding-left: 34px;
  .reply-action-r {
    display: flex;
  }

  .action-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: $light-text-color;
    font-size: 12px;
    &:nth-child(1) {
      margin-right: 10px;
    }
    img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }

    .el-icon {
      margin-right: 5px;
      font-size: 14px;
    }

    &:hover {
      color: $primary-color;
    }

    .liked {
      color: #f56c6c;
    }
  }
}

.reply-input-container {
  margin-top: 15px;
  padding-left: 34px;

  .reply-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    display: flex;
  }
}

.no-comments {
  text-align: center;
  padding: 30px 0;
  color: $light-text-color;
  font-size: 14px;
}

.author-card {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: 20px;
  margin-bottom: 20px;
}

.author-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  text-align: center;
}

.author-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.author-name-large {
  font-size: 18px;
  font-weight: 500;
  color: $text-color;
  margin-bottom: 10px;
}

.author-bio {
  font-size: 14px;
  color: $light-text-color;
  line-height: 1.5;
}

.author-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  padding: 15px 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-value {
  font-size: 18px;
  font-weight: 500;
  color: $text-color;
}

.stat-label {
  font-size: 12px;
  color: $light-text-color;
  margin-top: 5px;
}

.author-actions {
  display: flex;
  gap: 10px;
  .author-action-btn {
    background-color: $primary-color;
    color: #fff;
  }

  .el-button {
    flex: 1;
  }
}

.related-posts {
  background-color: #fff;
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  padding: 20px;
}

.related-post-list {
  margin-top: 15px;
}

.related-post-item {
  padding: 10px 0;
  border-bottom: 1px solid $border-color;
  cursor: pointer;

  &:last-child {
    border-bottom: none;
  }

  &:hover {
    .related-post-title {
      color: $primary-color;
    }
  }
}

.related-post-title {
  font-size: 14px;
  color: $text-color;
  margin-bottom: 5px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.related-post-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: $light-text-color;
}

// 响应式调整
@media (max-width: 1200px) {
  .forum-detail-wrapper {
    width: 100%;
    flex-direction: column;
  }

  .left-content {
    max-width: 100%;
  }

  .right-content {
    width: 100%;
  }

  .file-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .post-meta {
    flex-direction: column;
    align-items: flex-start;

    .post-time {
      margin-top: 5px;
    }
  }

  .post-actions {
    flex-wrap: wrap;
    gap: 15px;
  }

  .comment-content,
  .comment-actions,
  .reply-list {
    padding-left: 0;
  }

  .reply-input-container {
    padding-left: 0;
  }
}
</style>